<template>
	<Layout :class="'bg-white p-2'">
		<Row>
			<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" class="p-1" span="4">
			<!-- <Col class="p-1" span="4"> -->
			<Input class="w-100" v-model="clientName" placeholder="请输入客户名称" />
			</Col>
			<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" class="p-1" span="4">
			<!-- <Col class="p-1" span="4"> -->
			<Input class="w-100" v-model="phone" placeholder="请输入客户电话" />
			</Col>
			<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" class="p-1" span="4">
			<!-- <Col class="p-1" span="4"> -->
			<Date-picker class="w-100" type="datetime" @on-change="stChange" format="yyyy-MM-dd HH:mm:ss"
				placeholder="请选择开始时间">
			</Date-picker>
			</Col>
			<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" class="p-1" span="4">
			<!-- <Col class="p-1" span="4"> -->
			<Date-picker class="w-100" type="datetime" @on-change="etChange" format="yyyy-MM-dd HH:mm:ss"
				placeholder="请选择结束时间">
			</Date-picker>
			</Col>
			<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" class="p-1" span="6" style="width: 300px;">
			<!-- <Col class="p-1" span="6"> -->
			<radio-group class="p-1" v-model="ioFlg" style="width: 240px;">
				<label
					class="ivu-radio-wrapper ivu-radio-group-item ivu-radio-wrapper-checked ivu-radio-default">出/入：</label>
				<Radio label="" @click.native.prevent="changeData('')">全部</Radio>
				<Radio label="1" @click.native.prevent="changeData('1')">进门</Radio>
				<Radio label="0" @click.native.prevent="changeData('0')">出门</Radio>
			</radio-group>
			</Col>
			<!-- <Col :xs="24" class="p-1"> -->
			<Button class="float-right m-1" type="primary" shape="circle" @click="search()"
				icon="ios-search">查询</Button>
			<!-- </Col> -->
		</Row>
		<div class="mt-1 d-xl-none">
			<Row>
				<Col v-for="(record, index) in tableInfo.data" :xs="24" :sm="12" :md="8" :lg="8" :xl="6" :xxl="6"
					class="p-1 mt-2">
				<div class="shadow p-3 radius text-xs text-secondary">
					<div class="p-1 d-flex justify-content-between">
						<span>客户ID</span>
						<span>{{record.clientId}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>客户名称</span>
						<span>{{record.clientName}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>客户电话</span>
						<span>{{record.phone}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>门店名称</span>
						<span>{{record.name}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>设备ID</span>
						<span>{{record.uid}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>进/出门</span>
						<span v-if="record.ioFlg">进门</span>
						<span v-else>出门</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>进/出门时间</span>
						<span>{{record.ct}}</span>
					</div>
					<!-- <div class="p-1 d-flex justify-content-end text-sm">
						<Button type="error" @click="remove(user.userId)" ghost>删除</Button>
						<Button type="primary" class="ml-3" @click="show(user.userId)" ghost>详细</Button>

					</div> -->
				</div>
				</Col>
			</Row>
		</div>
		<div class="mt-1 d-none d-xl-block">
		<Table border :columns="tableInfo.columnInfo" :data="tableInfo.data">
		
			<template slot-scope="{ row, index }" slot="ioFlg">
				<span v-if="row.ioFlg">进门</span>
				<span v-else>出门</span>
			</template>
			<template slot-scope="{ row, index }" slot="ct">
				{{row.ct.replace("T"," ")}}
			</template>
		</Table>
		</div>
		<div>
		<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
			:total="tableInfo.total" />
		</div>
	</Layout>

</template>
<script>
	export default {
		data() {
			return {
				clientName: "",
				uid: "",
				name: "",
				phone: "",
				storeId: "",
				ioFlg: "",
				st: "",
				ed: "",
				tableInfo: {
					currentInteger: 1,
					pageSize: 12,
					total: 0,
					// columnInfo: [{
					// 		title: "客户ID",
					// 		key: "clientId",
					// 		minWidth: 100,
					// 	},
					// 	{
					// 		title: "客户名称",
					// 		key: "clientName",
					// 		minWidth: 100,
					// 	},
					// 	{
					// 		title: "门店名称",
					// 		key: "name",
					// 		minWidth: 180,
					// 	},
					// 	{
					// 		title: "设备ID",
					// 		key: "uid",
					// 		minWidth: 180,
					// 	},
					// 	{
					// 		title: "进/出门",
					// 		slot: "ioFlg",
					// 		minWidth: 100,
					// 	},
					// 	{
					// 		title: "进/出门时间",
					// 		slot: "ct",
					// 		minWidth: 180,
					// 	}
					// ],
					data: [],
				},
				allStore: []
			}

		},
		methods: {
			stChange: function(e) {
				this.st = e;
			},
			etChange: function(e) {
				this.ed = e;
			},
			changeData(nowValue) {
				nowValue === this.ioFlg ? this.ioFlg = "" : this.ioFlg = nowValue;
			},
			init: function() {
				this.tableInfo.currentInteger = 0;
				this.search();
			},
			search: function() {
				this.http.get({
					url: "/store/access-record/page",
					param: {
						clientName: this.clientName,
						st: this.st,
						ed: this.ed,
						accessId: this.accessId,
						storeId: this.storeId,
						phone: this.phone,
						ioFlg: this.ioFlg,
						uId: this.uid,
						current: this.tableInfo.currentInteger,
						size: this.tableInfo.pageSize
					},
				}).then(data => {
					this.tableInfo.currentInteger = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
					let totalPage = Math.ceil(this.tableInfo.total / this.tableInfo.pageSize);
					totalPage = totalPage < 1 ? 1 : totalPage;
					if (this.tableInfo.currentInteger > totalPage) {
						this.tableInfo.currentInteger = totalPage;
						this.search();
					};
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentInteger = changedPage;
				this.search();
			},
		},
		created: function() {
			this.storeId = this.store.state.currentUser.store.storeId;
			this.init();

		},


	}
</script>

<style scoped>
	.ivu-radio-group {
		height: 2rem;
		line-height: 2rem;
	}
</style>